<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        img{
            width: 200px;
            height: 230px;
        }
        ul>li{
            float: left;
            padding: 0px 5px;
            text-align: center;
        }
        .top{
            width: 404px;
            overflow: hidden;
        }
        .tip{
            float: left;
        }
        .change{
            float: right;
        }
    </style>
    <script src="../jquery.min.js"></script>
</head>
<body>
    <div class="top">
        <div class="tip">相关书籍</div>
        <div class="change">换一换</div>
    </div>
    <ul>
        <li>
            <img src="../img/boy.png" alt="404">
            <h3><a href="javascript:;">第一本图书</a></h3>
            <p>属于第一类</p>
        </li>
        <li>
            <img src="../img/boy.png" alt="404">
            <h3><a href="javascript:;">第一本图书</a></h3>
            <p>属于第一类</p>
        </li>
        <li></li>
    </ul>
    <script>
        //定义数组保存五项数据
        var arrBooks=[
                        { 
                            url:'../img/boy.png',
                            name:'第一本图书',
                            cls:'属于第一类'
                        },
                        { 
                            url:'../img/boy.png',
                            name:'第二本图书',
                            cls:'属于第二类'
                        },
                        { 
                            url:'../img/boy.png',
                            name:'第三本图书',
                            cls:'属于第三类'
                        },
                        { 
                            url:'../img/boy.png',
                            name:'第四本图书',
                            cls:'属于第四类'
                        },
                        { 
                            url:'../img/boy.png',
                            name:'第五本图书',
                            cls:'属于第五类'
                        }
                    ];
        //使用选择器获取换一换按钮
        $(".change").on("click",function(){
            
            // console.log(Math.random(0,6)*10);
            // 1 生成两个随机的下标
            // 2 根据下标获取数组元素
            // 3 将元素数组显示在页面中

            // console.log(createNum(2));
            // 将生成的数组保存在变量中
            var HTML="";
            var _tmpArr=createNum(2);
            for(var i=0; i<_tmpArr.length;i++){
                // console.log(_tmpArr[i]);
                // 根据索引号下标获取数据
                    HTML += '<li>';
                    HTML += '<img src='+arrBooks[_tmpArr[i]].url+' alt="404">';
                    HTML += '<h3><a href="javascript:;">'+arrBooks[_tmpArr[i]].name+'</a></h3>';
                    HTML += '<p>'+arrBooks[_tmpArr[i]].cls+'</p>';
                    HTML += '</li>'
            }
            // console.log(HTML)
            $("ul").html($(HTML));
           
        })
        //定义一个函数生成指定位数的随机数 
        function createNum(count){
            var arrTmp=[];
            for(var i=0; i<count; i++){
                var _index=Math.floor(Math.random(0,5)*arrBooks.length);
                arrTmp.push(_index);
            }            
            return arrTmp;
        }
    </script>
</body>
</html>